<template>
  <!-- 预警报警 -->
  <view class="conter">
    <cc-goback title='预警报警' color="#fff"></cc-goback>
    <view class="navigation_head"></view>
    <view class="head">
      <view class="head_a" @click="show_a">
        超标预警
        <view class="head_border_a" v-if="flag==1">
        </view>
      </view>
      <view class="head_b" @click="show_b">
        超标报警
        <view class="head_border_b" v-if="flag==2">
        </view>
      </view>
      <view class="head_c" @click="show_c">
        工况报警
        <view class="head_border_c" v-if="flag==3">
        </view>
      </view>
      <view class="head_d" @click="show_d">
        终端异常
        <view class="head_border_d" v-if="flag==4">
        </view>
      </view>
    </view>
    <!-- 超标预警 -->
    <view class="one" v-if="flag==1">
      <uni-card v-for="item in 4">
        <view class="box">
          <view class="frist_a">
            某某某企业污染进入预警值，请关注处理
          </view>
          <view class="frist_b">
            2020.05.01 15:00
          </view>
          <view class="frist_c">
            <button type="primary" plain="true">查看详情</button>
          </view>
        </view>
      </uni-card>
    </view>
    <!-- 超标报警 -->
    <view class="two" v-if="flag==2">
      <uni-card>
        <view class="box">
          <view class="frist_a">
            <view class="word_ac">
              待处理
            </view>
            某某某企业污染进入报警值，请关注处理
          </view>
          <view class="frist_b">
            2020.05.01 15:00
          </view>
          <view class="frist_cd">
            <button type="primary" plain="true">查看详情</button>
            <navigator url="../Alarm_handling/Alarm_handling">
              <button type="primary">提交处理结果</button>
            </navigator>
          </view>
        </view>
      </uni-card>
      <uni-card>
        <view class="box">
          <view class="frist_a">
            <view class="word_ac">
              已完成
            </view>
            某某某企业污染进入报警值，请关注处理
          </view>
          <view class="frist_b">
            2020.05.01 15:00
          </view>
          <view class="frist_c">
            <button type="primary" plain="true">查看详情</button>
          </view>
        </view>
      </uni-card>
      <uni-card>
        <view class="box">
          <view class="frist_a">
            <view class="word_ac">
              待处理
            </view>
            某某某企业污染进入报警值，请关注处理
          </view>
          <view class="frist_b">
            2020.05.01 15:00
          </view>
          <view class="frist_cd">
            <button type="primary" plain="true">查看详情</button>
            <navigator url="../Alarm_handling/Alarm_handling">
              <button type="primary">提交处理结果</button>
            </navigator>
          </view>
        </view>
      </uni-card>
      <uni-card>
        <view class="box">
          <view class="frist_a">
            <view class="word_ac">
              已完成
            </view>
            某某某企业污染进入报警值，请关注处理
          </view>
          <view class="frist_b">
            2020.05.01 15:00
          </view>
          <view class="frist_c">
            <button type="primary" plain="true">查看详情</button>
          </view>
        </view>
      </uni-card>
    </view>
    <!-- 工况报警 -->
    <view class="three" v-if="flag==3">
      <uni-card>
        <view class="box">
          <view class="frist_a">
            <view class="word_ac">
              待处理
            </view>
            某某某企业设备报警，请关注处理
          </view>
          <view class="frist_b">
            2020.05.01 15:00
          </view>
         <view class="frist_cd">
           <button type="primary" plain="true">查看详情</button>
           <navigator url="../Alarm_handling/Alarm_handling">
             <button type="primary">提交处理结果</button>
           </navigator>
         </view>
        </view>
      </uni-card>
      <uni-card>
        <view class="box">
          <view class="frist_a">
            <view class="word_ac">
              已完成
            </view>
            某某某企业设备报警，请关注处理
          </view>
          <view class="frist_b">
            2020.05.01 15:00
          </view>
          <view class="frist_c">
            <button type="primary" plain="true">查看详情</button>
          </view>
        </view>
      </uni-card>
      <uni-card>
        <view class="box">
          <view class="frist_a">
            <view class="word_ac">
              待处理
            </view>
            某某某企业设备报警，请关注处理
          </view>
          <view class="frist_b">
            2020.05.01 15:00
          </view>
          <view class="frist_cd">
            <button type="primary" plain="true">查看详情</button>
            <navigator url="../Alarm_handling/Alarm_handling">
              <button type="primary">提交处理结果</button>
            </navigator>
          </view>
        </view>
      </uni-card>
      <uni-card>
        <view class="box">
          <view class="frist_a">
            <view class="word_ac">
              已完成
            </view>
            某某某企业设备报警，请关注处理
          </view>
          <view class="frist_b">
            2020.05.01 15:00
          </view>
          <view class="frist_c">
            <button type="primary" plain="true">查看详情</button>
          </view>
        </view>
      </uni-card>
    </view>
    <!-- 终端异常 -->
    <view class="four" v-if="flag==4">
      <uni-card>
        <view class="box">
          <view class="frist_a">
            <view class="word_ac">
              待处理
            </view>
            某某某企业终端异常，请关注处理
          </view>
          <view class="frist_b">
            2020.05.01 15:00
          </view>
          <view class="frist_cc">
            <button type="primary" plain="true">查看详情</button>
            <button type="primary">提交处理结果</button>
          </view>
        </view>
      </uni-card>
      <uni-card>
        <view class="box">
          <view class="frist_a">
            <view class="word_ac">
              已完成
            </view>
            某某某企业终端异常，请关注处理
          </view>
          <view class="frist_b">
            2020.05.01 15:00
          </view>
          <view class="frist_c">
            <button type="primary" plain="true">查看详情</button>
          </view>
        </view>
      </uni-card>
      <uni-card>
        <view class="box">
          <view class="frist_a">
            <view class="word_ac">
              待处理
            </view>
            某某某企业终端异常，请关注处理
          </view>
          <view class="frist_b">
            2020.05.01 15:00
          </view>
          <view class="frist_cc">
            <button type="primary" plain="true">查看详情</button>
            <button type="primary">提交处理结果</button>
          </view>
        </view>
      </uni-card>
      <uni-card>
        <view class="box">
          <view class="frist_a">
            <view class="word_ac">
              已完成
            </view>
            某某某企业终端异常，请关注处理
          </view>
          <view class="frist_b">
            2020.05.01 15:00
          </view>
          <view class="frist_c">
            <button type="primary" plain="true">查看详情</button>
          </view>
        </view>
      </uni-card>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        flag: 1,
      };
    },
    methods: {
      show_a() {
        this.flag = 1
      },
      show_b() {
        this.flag = 2
      },
      show_c() {
        this.flag = 3
      },
      show_d() {
        this.flag = 4
      },
    }
  }
</script>

<style lang="scss">
  .conter {
    height:100vh;
    background-color: #F7F7F7;
    overflow: hidden;
  }
.navigation_head{
    height: calc(88rpx + var(--status-bar-height));
  }
  .head {
    display: flex;
    height: 88rpx;
    background: #FFFFFF;
    border: 1px solid #F2F2F2;
  }

  .head_a {
    width: 25%;
    margin: auto;
    text-align: center;
  }

  .head_b {
    width: 25%;
    margin: auto;
    text-align: center;
  }

  .head_c {
    width: 25%;
    margin: auto;
    text-align: center;
  }

  .head_d {
    width: 25%;
    margin: auto;
    text-align: center;
  }

  .head_border_a {
    width: 60rpx;
    height: 4rpx;
    margin: auto;
    background: #4EA1FF;
    border-radius: 2rpx;
  }

  .head_border_b {
    width: 60rpx;
    height: 4rpx;
    margin: auto;
    background: #4EA1FF;
    border-radius: 2rpx;
  }

  .head_border_c {
    width: 60rpx;
    height: 4rpx;
    margin: auto;
    background: #4EA1FF;
    border-radius: 2rpx;
  }

  .head_border_d {
    width: 60rpx;
    height: 4rpx;
    margin: auto;
    background: #4EA1FF;
    border-radius: 2rpx;
  }

  .card_a {
    height: 250rpx;
  }

  .frist_a {
    font-size: 30rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
  }

  .frist_b {
    margin-top: 14rpx;
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #999999;
  }

  .frist_c {
    margin-top: 40rpx;
  }

  .frist_cc {
    display: flex;
    margin-top: 40rpx;
    button {
      width: 45%;
    }
  }
  .frist_cd {
    display: flex;
    margin-top: 40rpx;
    button {
      width: 300rpx;
    }
  }

  .word_ac {
    float: left;
    width: 96rpx;
    height: 36rpx;
    line-height: 36rpx;
    text-align: center;
    margin: 5rpx 15rpx 0 0;
    font-size: 22rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #4EA1FF;
    background: #E7F1FF;
    border-radius: 18rpx;
    border: 1rpx solid #4EA1FF;
  }
</style>
